<template>
    <div class="page-box">
        <div class="page-search">
            <div>
                <label>单据查询</label>
                <el-input v-model="searchForm.Number" style="width: 160px;"></el-input>
            </div>

            <div>
                <label>客户名称</label>
                <el-select v-model="searchForm.CustomerNumber" style="width: 160px;" placeholder="请选择客户"
                    @change="CustomerChange" allow-create filterable>
                    <el-option v-for="Client in ClientList" :key="Client.CustomerNumber" :label="Client.ClientName"
                        :value="Client.Id"></el-option>
                </el-select>
            </div>

            <div>
                <label>出库仓</label>
                <el-input v-model="searchForm.WarehouseId" style="width: 160px;" placeholder="请选择出库仓"
                    @change="WarehouseChange" allow-create filterable>>
                    <el-option v-for="Warehouse in WarehouseList" :key="Warehouse.Id" :label="Warehouse.WarehouseName"
                        :value="Warehouse.Id"></el-option>
                </el-input>
            </div>

            <div>
                <label>订单状态</label>
                <el-select v-model="searchForm.Status" style="width: 160px;" placeholder="请选择订单状态" allow-create filterable>
                    <el-option label="待审核" value="0"></el-option>
                    <el-option label="已审核" value="1"></el-option>
                    <el-option label="已出库" value="2"></el-option>
                </el-select>
            </div>
            
            <div>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>

        </div>
        
        <div class="page-section">

            <div class="page-tool">
                <el-button type="primary" plain icon="el-icon-plus" @click="add" size="small">新增</el-button>
                <el-button type="danger" plain icon="el-icon-delete" @click="dels" size="small">删除</el-button>
            </div>

            <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="calc(100vh - 350px)">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column fixed prop="Number" label="销售单编号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="CustomerName" label="客户名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="WarehouseName" label="出货仓"  :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Transfer" label="运输方式" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Status" label="订单状态" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-tag type="info" v-if="Number(scope.row.Status) === 0">待审核</el-tag>
                        <el-tag type="success"  v-else-if="Number(scope.row.Status) === 1">已审核</el-tag>
                        <el-tag type="danger" v-else-if="Number(scope.row.Status) === 2">已出库</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="DeliveryDate" label="出库日期" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ scope.row.DeliveryDate | formatDateTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>

                <el-table-column label="操作" :show-overflow-tooltip="true" width="220">
                    <template slot-scope="scope">
                        <el-button type="text" @click="update(scope.row)" :disabled="Number(scope.row.Status) === 1 || Number(scope.row.Status) === 2">编辑</el-button>
                        <el-button type="text" @click="detailsQuote(scope.row)">明细</el-button>
                        <el-button type="text" @click="AuditSale(scope.row)" :disabled="Number(scope.row.Status) === 1 || Number(scope.row.Status) === 2">审核</el-button>
                        <el-button type="text" @click="CounterSale(scope.row)" :disabled="Number(scope.row.Status) === 0 || Number(scope.row.Status) === 2">反审</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
                        :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize"
                        :TotalCount="pageDomain.TotalCount" />

        </div>

        <el-dialog :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible"
            width="65%" @close="closeDialog">
            <OrderSaleInput :ClientList="ClientList" :WarehouseList="WarehouseList" :model="model" :isUpdate="isUpdate"
                @callback="callback" v-if="dialogDomain.dialogVisible && dialogDomain.dialogType==0 " />
                <OrderSaleDetails  v-else-if="dialogDomain.dialogVisible && dialogDomain.dialogType==1 "  :model="model"/>
        </el-dialog>

    </div>
</template>

<script>
import OrderSaleInput from './components/OrderSaleInput.vue'
import OrderSaleDetails from './components/OrderSaleDetails.vue'
import Pagination from '@/components/Pagination.vue';
 
export default {
    components:{
        Pagination,
        OrderSaleInput,
        OrderSaleDetails
    },
    mounted(){
        this.dataBind();
    },
    data(){
        return{
            ClientList:[],
            WarehouseList:[],
            searchForm:{
                Number:'',
                CustomerNumber: '',
                WarehouseId:'',
                Status: ''
            },
            dialogDomain: {
                title: '新增销售订单',
                dialogVisible: false,
                dialogType: 0

            },
            isUpdate: false,

            model:{
                Number: '',
                CustomerNumber:'',
                CustomerName:'',

                WarehouseId:'',
                WarehouseName:'',
                Transfer:'',
                Name:"",

                Status: '0',
                CreateTime:'',
                Remark:'',
            },
            pageDomain: {
                PageIndex: 1,
                PageSize: 10,
                TotalCount: 0
            },
            tableData: [],
            isLoading: false
        }
    },
    created(){
        this.GetOrderReturnSelectData();
    },
    methods:{
        detailsQuote(model){
            this.dialogDomain.title = "销售订单明细";
            this.dialogDomain.dialogVisible = true;
            this.dialogDomain.dialogType = 1;
            this.model = model;
        },
        CustomerChange(model){
            this.model.CustomerNumber= model.Id;
            this.model.CustomerName = model.ClientName;
            console.log(model)
        },
        WarehouseChange(model) {
            this.model.WarehouseId= model.Id;
            this.model.WarehouseName = model.WarehouseName;
            console.log(model)

        },
        add(){
            this.dialogDomain.title = "新增销售订单"
            this.dialogDomain.dialogVisible = true;
            this.dialogDomain.dialogType=0;
            this.isUpdate = false;
        },
        update(model) {
            this.dialogDomain.title = "编辑销售订单";
            this.dialogDomain.dialogVisible = true;
            this.isUpdate = true;
            this.dialogDomain.dialogType = 0;
            console.log(model);
            this.model = model;

            
        },
        //审核
        AuditSale(model) {
            this.$confirm('确定更改选中的数据吗？ 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$http.putForm('/api/OrderSale/UpdateOrderStatus', {
                            id: model.Id,
                            Status: "1" // 将状态设置为已审核
                        })
                        .then((res) => {
                            this.showNotify('操作成功', 'success');
                            this.dataBind();
                        })
                }).catch(() => { });
        },
        //反审
        CounterSale(model) {
            this.$confirm('确定更改选中的数据吗？ 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$http.putForm('/api/OrderSale/UpdateOrderStatus', {
                        id: model.Id,
                        Status: "0" // 将状态设置为待审核
                    })
                        .then((res) => {
                            this.showNotify('操作成功', 'success');
                            this.dataBind();
                        })
                }).catch(() => { });

        },
        //删除
        dels(){
            if(this.$refs.dataForm.selection.length <= 0){
                this.showNotify('请选择一项')
                    return;
            }
            this.$confirm('确定删除选中的数据及其子项吗？这将不可恢复，是否继续?', '提示',{
                confirmButtonText:'确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                var ids = this.$refs.dataForm.selection.map(x => x.Id)

                let params = new URLSearchParams();
                params.append('ids', ids.join(','))

                this.$http.delete('/api/OrderSale/DelAll',{
                    data:params,
                    headers:{
                        'content-Type':'application/x-www-form-urlencoded'
                    },
                    loading:this.$loading()
                })
                .then((res) =>{
                    this.showNotify('操作成功','success');
                    this.dataBind();
                })
                .catch((error) => {
                    console.error('删除请求出错：', error);
                    this.showNotify('删除请求出错', 'error');
                });
                
            }).catch(() => {});
        },
        closeDialog(){
            this.model = {
                Number:'',
                CustomerNumber:'',
                CustomerName:'',

                WarehouseId:'',
                WarehouseName:'',
                Transfer:'',
                Name: '',
                
                Status: '0',
                CreateTime:'',
                Remark:'',
            }
        },
        search() {
            this.pageDomain.PageIndex = 1;
            this.dataBind();
        },
        reset(){
            this.searchForm.Number = '';
            this.searchForm.CustomerNumber = '';
            this.searchForm.WarehouseId = '';
            this.searchForm.Status = '';
        },
        callback() {
            let actionName = this.isUpdate ? '编辑' : '新增';
            this.showNotify(actionName + '成功', 'success');
            this.dialogDomain.dialogVisible = false;
            this.dataBind();
        },
        dataBind(){
            this.isLoading = true;
            this.$http.get('/api/OrderSale',
                {
                    params:{
                        PageIndex: this.pageDomain.PageIndex,
                        PageSize: this.pageDomain.PageSize,
                        Number: this.searchForm.Number,
                        CustomerNumber: this.searchForm.CustomerNumber,
                         WarehouseId: this.searchForm.WarehouseId,
                        Status: this.searchForm.Status,
                    }
                })
                .then(res => {
                    this.tableData = res.Data;
                    this.pageDomain.TotalCount = res.Count;
                    this.isLoading = false;
                })
        },
        GetOrderReturnSelectData(){
            this.$http.get('./api/Integrated/GetOrderReturnSelectData')
            .then(res => {
                console.log(res.Data);
                this.ClientList = res.Data.ClientList;
                this.WarehouseList = res.Data.WarehouseList;
            })
        },
        handleSizeChange(val) {
            this.pageDomain.PageIndex = 1;
            this.pageDomain.PageSize = val;
            this.dataBind();
        },
        handleCurrentChange(val) {
            this.pageDomain.PageIndex = val;
            this.dataBind();
        },

    }
}
</script>

<style>

 </style>